<template>
  <div class="ano-nav">
    <ul class="list">
      <li class="item" 
        v-for="(item, index) in navs"
        :class="{'active': active === index}"
        :key="item.name"
        @click="handleSelect(item)">
          <span class="txt">{{ item.name }}</span>
        </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "anoNav",
  props: {
    active: {
      type: Number,
    }
  },
  data() {
    return {
      navs: [
        { name: '产品', path: 'products'},
        { name: '设计', path: 'design'},
        { name: '模板', path: 'templates'},
        { name: '服务', path: ''},
        { name: '个人中心', path: ''},
      ]
    }
  },
  created() {
  },
  methods: {
    handleSelect(item) {
      if (!item.path) {
        return;
      }
      this.$router.push({name: item.path})
    },
  }
};
</script>

<style lang="less" scoped>
.ano-nav {
  .list {
    display: flex;
    line-height: 32px;
    font-size: 15px;
    text-align: center;
    padding-top: 4px;
    padding-bottom: 2px;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    .item {
      flex: 1;
      max-width: 220px;
      cursor: pointer;
      user-select: none;
      .txt {
        display: inline-block;
        border-bottom: 2px solid transparent;
      }
      &.active,
      &:hover {
        color: @primary-color;
        .txt {
          border-color: @primary-color;
        }
      }
    }
  }
}
</style>
